<template>
  <div class="reviews">
    <div class="reviews-title">用户评论</div>
    <Eva />
    <Eva />
    <div class="reviews-addreview">
      <div class="reviews-addreview-title">添加用户评价</div>
      <div class="reviews-addreview-rate">
        <div>你的评分</div>
        <el-rate v-model="rate" size="large" allow-half />
      </div>
      <div class="reviews-addreview-text">
        <div>评价标题</div>
        <div>
          <input maxlength="50" v-model="reviewTitle" placeholder="请输入评价标题" type="text">
        </div>
      </div>
      <div class="reviews-addreview-textarea">
        <div>评价内容</div>
        <div>
          <textarea maxlength="150" v-model="reviewContent" placeholder="请输入评价内容"></textarea>
        </div>
      </div>
      <div class="reviews-addreview-btn">评论</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Eva from './eva.vue'


const rate = ref(0)

const reviewTitle = ref('')

const reviewContent = ref('')

</script>

<style lang="less" scoped>
.reviews {
  .reviews-title {
    color: rgb(20, 28, 29);
    font-family: Epilogue;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;

    margin-bottom: 22px;
  }

  .reviews-addreview {

    .reviews-addreview-title {
      color: rgb(20, 28, 29);
      font-family: Epilogue;
      font-size: 20px;
      font-weight: 700;
    }
  }

  .reviews-addreview-rate {
    margin-top: 20px;

    div:first-child {
      color: rgb(20, 28, 29);
      font-family: Epilogue;
      font-size: 16px;
      font-weight: 400;
      line-height: 30px;
    }

    :deep(.el-rate__icon) {
      font-size: 24px;
      margin-right: 0;
    }
  }

  .reviews-addreview-text {
    margin-top: 32px;

    div:first-child {
      color: rgb(20, 28, 29);
      font-family: Epilogue;
      font-size: 15px;
      font-weight: 400;
      margin-bottom: 10px;
    }

    input {
      width: 100%;
      height: 48px;

      box-sizing: border-box;
      border: 1px solid rgba(163, 170, 171, 0.2);
      border-radius: 10px;
      padding: 0 20px;
      font-family: Epilogue;
      font-size: 16px;
      font-weight: 400;

      outline: none;
    }

    input::placeholder {
      color: rgba(163, 170, 171, 0.8);
      font-family: Epilogue;
      font-size: 16px;
      font-weight: 400;
    }
  }

  .reviews-addreview-textarea {
    margin-top: 32px;

    div:first-child {
      margin-bottom: 10px;
    
      color: rgb(20, 28, 29);
      font-family: Epilogue;
      font-size: 15px;
      font-weight: 400;
    }

    textarea {
      width: 100%;
      height: 104px;

      box-sizing: border-box;
      border: 1px solid rgba(163, 170, 171, 0.2);
      border-radius: 10px;
      padding: 18px;
      font-family: Epilogue;
      font-size: 16px;
      font-weight: 400;
      

      resize: none; // 禁止调整大小
      outline: none; // 移除默认的轮廓线
    }

    textarea::placeholder {
      color: rgba(163, 170, 171, 0.8);
      font-family: Epilogue;
      font-size: 16px;
      font-weight: 400;
    }
  }

  .reviews-addreview-btn {
    width: 139px;
    height: 48px;
    margin-top: 32px;

    border-radius: 10px;
    background: rgb(8, 131, 149);

    color: rgb(255, 255, 255);
    font-family: Epilogue;
    font-size: 16px;
    font-weight: 400;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s;
  }

  .reviews-addreview-btn:hover {
    background: rgb(22, 162, 184);
  }
}
</style>